<script lang="ts" setup>
import type { RoutingStepModel } from '#/api/process/models';

import { watch } from 'vue';

import { useVbenDrawer, useVbenModal } from '@vben/common-ui';

import {
  Button,
  Divider,
  Dropdown,
  Flex,
  Menu,
  MenuItem,
  message,
  Popconfirm,
} from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
  deleteRoutingStepApi,
  downSortRoutingStepApi,
  getRoutingStepListApi,
  upSortRoutingStepApi,
} from '#/api/process/routingStep';
import { ArrowDownIcon, ArrowUpIcon } from '#/components/icons';

import RoutingStepMaterialFormDrawer from '../../step-material/modules/form-drawer.vue';
import RoutingStepStandardFormDrawer from '../../step-standard/modules/form-drawer.vue';
import RoutingStepTaskFormDrawer from '../../step-task/modules/form-drawer.vue';
import { useColumns } from './data';
import Form from './modules/form.vue';

defineOptions({
  inheritAttrs: false,
});

const { lineId, routingId } = defineProps<{
  lineId?: number;
  routingId?: number;
}>();

const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: Form,
  destroyOnClose: true,
});

const [TaskFormDrawer, taskFormDrawerApi] = useVbenDrawer({
  connectedComponent: RoutingStepTaskFormDrawer,
  destroyOnClose: true,
});

const [StandardFormDrawer, standardFormDrawerApi] = useVbenDrawer({
  connectedComponent: RoutingStepStandardFormDrawer,
  destroyOnClose: true,
});

const [MaterialFormDrawer, materialFormDrawerApi] = useVbenDrawer({
  connectedComponent: RoutingStepMaterialFormDrawer,
  destroyOnClose: true,
});

/**
 * 创建工艺步骤
 */
function onCreate() {
  formModalApi.setData({ routingId, lineId }).open();
}

/**
 * 编辑工艺步骤
 */
function onEdit(row: RoutingStepModel) {
  formModalApi.setData({ values: row, routingId, lineId }).open();
}

/**
 * 删除工艺步骤
 */
function onDelete(row: RoutingStepModel) {
  const hideLoading = message.loading({
    content: '正在删除',
    duration: 0,
    key: 'action_process_msg',
  });
  deleteRoutingStepApi(row.id)
    .then(() => {
      message.success({
        content: '删除成功',
        key: 'action_process_msg',
      });
      loadData();
    })
    .catch(() => {
      hideLoading();
    });
}

const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions: {
    columns: useColumns(),
    border: true,
    stripe: true,
    pagerConfig: {
      enabled: false,
    },
  },
});

/**
 * 显示工艺物料
 */
function openTask(row: RoutingStepModel) {
  taskFormDrawerApi
    .setData({ stepId: row.id, opName: row.operation.opName })
    .open();
}

/**
 * 显示工步设定
 */
function openStandard(row: RoutingStepModel) {
  standardFormDrawerApi
    .setData({
      stepId: row.id,
      opName: row.operation.opName,
    })
    .open();
}

/**
 * 显示工艺物料
 */
function openMaterial(row: RoutingStepModel) {
  materialFormDrawerApi
    .setData({
      stepId: row.id,
      opName: row.operation.opName,
    })
    .open();
}

/**
 * 向上排序
 */
async function upSort(row: RoutingStepModel) {
  await upSortRoutingStepApi(row.id);
  await loadData();
}

/**
 * 向下排序
 */
async function downSort(row: RoutingStepModel) {
  await downSortRoutingStepApi(row.id);
  await loadData();
}

/**
 * 加载数据
 */
async function loadData() {
  const data = await getRoutingStepListApi({ routingId });
  gridApi.grid.loadData(data);
}

watch(
  () => routingId,
  async (value, oldValue) => {
    if (value !== oldValue) {
      gridApi.setLoading(true);
      await loadData();
      setTimeout(() => {
        gridApi.setLoading(false);
      }, 300);
    }
  },
);
</script>

<template>
  <FormModal @success="() => loadData()" />
  <TaskFormDrawer class="w-[720px]" />
  <StandardFormDrawer class="w-10/12" />
  <MaterialFormDrawer class="w-[680px]" />
  <Grid>
    <template #toolbar-actions>
      <Button :disabled="!routingId" type="primary" @click="onCreate()">
        新增工艺步骤
      </Button>
    </template>
    <template #sort="{ row }">
      <Flex class="items-center justify-center">
        <ArrowUpIcon class="cursor-pointer" @click="upSort(row)" />
        <Divider type="vertical" />
        <ArrowDownIcon class="cursor-pointer" @click="downSort(row)" />
      </Flex>
    </template>
    <template #action="{ row }">
      <Button size="small" type="link" @click="onEdit(row)"> 编辑 </Button>
      <Popconfirm title="确定要删除吗？" @confirm="onDelete(row)">
        <Button danger size="small" type="link"> 删除 </Button>
      </Popconfirm>
      <Dropdown>
        <template #overlay>
          <Menu>
            <MenuItem @click="openTask(row)">工步设定</MenuItem>
            <MenuItem @click="openStandard(row)">工艺标准</MenuItem>
            <MenuItem @click="openMaterial(row)">工艺物料</MenuItem>
          </Menu>
        </template>
        <Button size="small" type="link"> 设置 </Button>
      </Dropdown>
    </template>
  </Grid>
</template>
